<template>
  <div class="">
    <Dialog
      title="选择关联合同"
      v-model="visible"
      :width="1000"
      align-center
    >
      <el-form :inline="true" :model="searchData" class="mb-12" label-width="68px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="合同名称" prop="name">
              <el-input v-model="searchData.name" class="formInp" clearable placeholder="请输入合同名称" @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同编号" prop="number">
              <el-input v-model="searchData.number" class="formInp" clearable placeholder="请输入合同编号"
                @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="handleQuery">
                <Icon class="mr-5px" icon="ep:search" />
                搜索
              </el-button>
              <el-button @click="resetQuery">
                <Icon class="mr-5px" icon="ep:refresh" />
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="loading" :data="tableData" @selection-change="tableSelectionChange">
        <el-table-column type="selection" width="30" />
        <template v-for="item in relationsColumn" :key="item.prop">
          <el-table-column
            :width="item.width"
            :align="item.align ? item.align : 'center'" 
            :label="item.label"
            :prop="item.prop"
          >
            <template #default="scope">
              <div v-if="item.prop == 'category'">
                <span v-if="scope.row.category || scope.row.category === 0">{{ categoryList.find(item => item.id === scope.row.category).name }}</span>
                <span v-else>-</span>
              </div>
              <div v-else-if="item.prop == 'type'">
                <span v-if="scope.row.type || scope.row.type === 0">{{ contractTypeList.find(item => item.value === scope.row.type).label }}</span>
                <span v-else>-</span>
              </div>
              <div v-else-if="item.prop === 'department'">{{ scope.row.department ? findDeptNameById(deptTree, scope.row.department) : '-' }}</div>
              <div v-else>
                {{ scope.row[item.prop] || (item.type === 'number' ? '0.00' : '-') }}
              </div>
            </template>
          </el-table-column>
        </template>
  
      </el-table>
      <!-- 分页 -->
      <div class="!h-40px">
        <Pagination v-model:limit="searchData.pageSize" v-model:page="searchData.pageNo" :total="total" @pagination="getList" />
      </div>
      <template #footer>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </template>
    </Dialog>
  </div>
</template>
<script setup>
  import {ref,reactive,defineEmits} from "vue"
  import { relationsColumn } from './formRules'
  import * as ContractApi from '@/api/viewsApi/contract' // 合同管理接口
  const visible = ref(false)
  const searchData = reactive({
    name: '',
    number: '',
    pageNum: 1,
    pageSize: 10,
  })
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const tableData = ref([]) // 列表的数据
  const selectionList = ref([])
  const categoryList = inject('categoryList') // 合同类别数据
  const contractTypeList =  inject('contractTypeList') // 合同类别数据
  const deptTree = inject('deptTree') // 树形结构
  const emit = defineEmits(['change'])
  const init = () => {
    visible.value = true
    getList()
  }
  const message = useMessage() // 消息弹窗
  /** 查询角色列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await ContractApi.getContractlList(searchData)
      data.list.forEach(item => {
        item.amountWithTax = item.amountWithTax / 100
        item.amountWithoutTax = item.amountWithoutTax / 100
      })
      tableData.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    searchData.pageNo = 1
    getList()
  }
  /** 重置按钮操作 */
  const resetQuery = () => {
    searchData.name = ''
    searchData.number = ''
    getList()
  }

  const tableSelectionChange = (selection) => {
    selectionList.value = selection
  }


  /** 提交表单 */
  const submitForm = () => {
    if (selectionList.value.length === 0) {
      message.error('请选择关联合同')
      return
    }

    let flagData = selectionList.value.map(item =>{ 
      return {
        id: item.id,
        name: item.name,
        number: item.number,
        category: item.category,
        type: item.type,
        department: item.department,
        amountWithTax: item.amountWithTax,
        amountWithoutTax: item.amountWithoutTax,
      }
    })
    visible.value = false
    emit('change', flagData)
  }
  function findDeptNameById(tree, id) {
    for (const node of tree) {
      if (node.id === id) {
        return node.name
      }
      if (node.children && node.children.length > 0) {
        const name = findDeptNameById(node.children, id)
        if (name) return name
      }
    }
    return ''
  }
  defineExpose({
    init
  })
</script>
<style lang="scss" scoped>
::v-deep .el-form-item{
  width: auto;
}
</style>
